:root {
  --animate-duration: 300ms;
  --animate-delay: 300ms;
}

/* .title {
  width: 8rem;
  background: red;
} */

.fade-enter,
.fade-exit-done,
.fade-appear {
  opacity: 0;
  /* transform: scale(.6); */
}

.fade-enter-active,
.fade-appear-active {
  opacity: 1;
  /* transform: scale(1); */
  transition: opacity 300ms, transform 300ms;
}

.fade-exit-active {
  opacity: 0;
  /* transform: scale(.6); */
  transition: all 300ms;
}

/* ---------------------------------- */

.router-enter {
  opacity: 0;
}

.router-enter-active {
  opacity: 1;
  transition: all 600ms;
}

.router-exit-active {
  opacity: 0;
  transition: all 0ms;
}